<template>
    <view class="skeleton-wrapper">
        <!-- 类型一：带头像的列表项 -->
        <template v-if="type === 'list'">
            <view class="skeleton-list-item" v-for="i in count" :key="i">
                <view class="skeleton avatar" :style="!sync ? { animationDelay: `${i * 0.2}s` } : {}"></view>
                <view class="content">
                    <view class="skeleton line" v-for="j in 3" :key="j"
                        :style="!sync ? { animationDelay: `${i * 0.2 + j * 0.1}s` } : {}"></view>
                </view>
            </view>
        </template>

        <!-- 类型二：卡片网格 -->
        <template v-if="type === 'grid'">
            <view class="skeleton-grid">
                <view class="grid-item" v-for="i in count" :key="i">
                    <view class="skeleton image" :style="!sync ? { animationDelay: `${i * 0.2}s` } : {}"></view>
                    <view class="skeleton line" v-for="j in 3" :key="j"
                        :style="!sync ? { animationDelay: `${i * 0.2 + j * 0.1}s` } : {}"></view>
                </view>
            </view>
        </template>
    </view>
</template>

<script setup>
defineProps({
    type: {
        type: String,
        default: 'list'
    },
    count: {
        type: Number,
        default: 1
    },
    // 是否同步动画
    sync: {
        type: Boolean,
        default: false
    }
})
</script>

<style>
@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}

.skeleton {
    background: #EEEEEE;
    animation: blink 1.5s ease-in-out infinite;
}
</style>

<style lang="scss" scoped>
.skeleton-wrapper {
    padding: 20rpx;
    background: #fff;
    border-radius: 24rpx;
    overflow: hidden;

    // 列表项样式
    .skeleton-list-item {
        display: flex;
        padding: 20rpx 0;

        .avatar {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .content {
            flex: 1;
            margin-left: 20rpx;

            .line {
                height: 32rpx;
                border-radius: 6rpx;
                margin: 16rpx 0;

                &:nth-child(1) {
                    width: 60%;
                }

                &:nth-child(2) {
                    width: 80%;
                }

                &:nth-child(3) {
                    width: 70%;
                }
            }
        }
    }

    // 网格样式
    .skeleton-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;

        .grid-item {
            width: calc((100% - 40rpx) / 3);

            .image {
                width: 100%;
                height: 200rpx;
                border-radius: 12rpx;
                margin-bottom: 16rpx;
            }

            .line {
                height: 32rpx;
                border-radius: 6rpx;
                margin: 12rpx 0;

                &:nth-child(2) {
                    width: 90%;
                }

                &:nth-child(3) {
                    width: 60%;
                }

                &:nth-child(4) {
                    width: 80%;
                }
            }
        }
    }
}
</style>